<script setup>
import { ref } from 'vue'
import CatoonIcon from './CatoonIcon.vue'

const emit = defineEmits(['getSearchVal'])

const searchVal = ref('')
const checkBtn = () => {
  emit('getSearchVal', searchVal.value)
}
</script>

<template>
  <header class="header">兑换码攻略小站</header>
  <div class="search-wrap color-style">
    <!-- input container  Find everything about the game...-->
    <div class="search-input-container">
      <input 
        class="search-input" 
        placeholder="找到大部分游戏的兑换码相关信息..." 
        v-model="searchVal"
      />
      <div class="catoon-icon">
        <div class="catoon-icon__pc">
          <CatoonIcon/>
        </div>
        <div class="catoon-icon__mobile">
          <svg fill="currentColor" stroke="currentColor" viewBox="0 0 1024 1024" width="32" height="32">
            <path d="M862.609 816.955L726.44 680.785l-0.059-0.056a358.907 358.907 0 0 0 56.43-91.927c18.824-44.507 28.369-91.767 28.369-140.467 0-48.701-9.545-95.96-28.369-140.467-18.176-42.973-44.19-81.56-77.319-114.689-33.13-33.129-71.717-59.144-114.69-77.32-44.507-18.825-91.767-28.37-140.467-28.37-48.701 0-95.96 9.545-140.467 28.37-42.973 18.176-81.56 44.19-114.689 77.32-33.13 33.129-59.144 71.717-77.32 114.689-18.825 44.507-28.37 91.767-28.37 140.467 0 48.7 9.545 95.96 28.37 140.467 18.176 42.974 44.19 81.561 77.32 114.69 33.129 33.129 71.717 59.144 114.689 77.319 44.507 18.824 91.767 28.369 140.467 28.369 48.7 0 95.96-9.545 140.467-28.369 32.78-13.864 62.997-32.303 90.197-54.968 0.063 0.064 0.122 0.132 0.186 0.195l136.169 136.17c6.25 6.25 14.438 9.373 22.628 9.373 8.188 0 16.38-3.125 22.627-9.372 12.496-12.496 12.496-32.758 0-45.254z m-412.274-69.466c-79.907 0-155.031-31.118-211.534-87.62-56.503-56.503-87.62-131.627-87.62-211.534s31.117-155.031 87.62-211.534c56.502-56.503 131.626-87.62 211.534-87.62s155.031 31.117 211.534 87.62c56.502 56.502 87.62 131.626 87.62 211.534s-31.118 155.031-87.62 211.534c-56.503 56.502-131.627 87.62-211.534 87.62z"></path>
          </svg>
        </div>
      </div>
    </div>
    <!-- search btn -->
    <div class="search-submit-container">
      <button @click="checkBtn">搜一下</button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.color-style {
  --btn-color-background: #ffb319;
  --btn-color-text: #191919;
}
.header {
  text-align: center;
  font-family: '楷体';
  letter-spacing: 5px;
  font-size: 24px;
  font-weight: bold;
}
.search-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 50px 20px 0 20px;
  .search-input-container {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-primary);
    width: 100%;
    height: 50px;
    position: relative;
    .search-input {
      padding-top: 0;
      width: 82%;
      height: 100%;
      padding-left: 15px;
      font-size: 18px;
      border-radius: 24px 0 0 24px;
      font-family: inherit;
      color: var(--color-primary);
      background-color: transparent;
    }
    .catoon-icon {
      position: absolute;
      right: 0;
      bottom: 0;
      pointer-events: none;
      .catoon-icon__mobile {
        display: none;
      }
      .catoon-icon__pc {
        display: block;
      }
    }
  }
  .search-submit-container {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    button {
      height: 48px;
      padding-left: 20px;
      padding-right: 20px;
      color: var(--btn-color-text);
      border-radius: 5px;
      border: 1px solid var(--btn-color-background);
      background-color: var(--btn-color-background);
      font-size: 18px;
      min-width: 220px;
      max-width: max-content;
      cursor: pointer;
      font-weight: bold;
      font-family: '楷体';
    }
  }
}

@media (max-width: 980px) {
  .search-wrap {
    max-width: 680px;
    margin: 0 auto;
    .search-input-container {
      border: 1px solid var(--color-primary);
      border-radius: 24px;
      width: 100%;
      height: 50px;
      position: relative;
      .search-input {
        padding-top: 0;
        width: 82%;
        height: 100%;
        padding-left: 15px;
        font-size: 18px;
        border-radius: 24px 0 0 24px;
        font-family: inherit;
        color: var(--color-primary);
        background-color: transparent;
      }
      .catoon-icon {
        right: 12px;
        .catoon-icon__mobile {
          display: block;
        }
        .catoon-icon__pc {
          display: none;
        }
      }
    }
    .search-submit-container {
      display: none;
    }
  }
}
</style>
